import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  products: Array<Product>;

  productId: number;

  productTitle: string;

  /*用于接收路由传递过来的参数*/
  constructor(private routeInfo: ActivatedRoute) {
  }

  /*声明周期钩子 初始化一次*/
  ngOnInit() {
    /*参数快照 因为ngOnInit执行一次 参数快照无法再相同组件切换时动态变换属性值*/
    /*this.productId = this.routeInfo.snapshot.queryParams['ids'] || this.routeInfo.snapshot.params['id'];*/
    /*参数订阅 id再路由中订阅*/
    this.routeInfo.params.subscribe((params: Params) => this.productId = params['id']);
    /*订阅传递过来的数据*/
    this.routeInfo.data.subscribe((data: { product: Product }) => {
      this.productId = data.product.id;
      this.productTitle = data.product.title;
    });
    this.products = [
      new Product(1, '商品1', 13, 5, '飞机是一种快速飞行的工具，他能搭载许多乘客！', ['数码产品', '电子商务']),
      new Product(2, '商品2', 123, 2.5, '飞机是一种快速飞行的工具，他能搭载许多乘客！', ['影视时尚', '非常天地']),
      new Product(3, '商品3', 23, 3.5, '飞机是一种快速飞行的工具，他能搭载许多乘客！  ', ['绝世唐门', '万古神帝']),
      new Product(4, '商品4', 113, 2.5, '飞机是一种快速飞行的工具，他能搭载许多乘客！', ['快乐肥皂水', '乡里']),
      new Product(5, '商品5', 133, 2.5, '飞机是一种快速飞行的工具，他能搭载许多乘客！', ['A', 'B']),
    ];
  }

}

export class Product {
  constructor(
    public id?: number,
    public title?: string,
    public price?: number,
    public rating?: number,
    public desc?: string,
    public categories?: Array<string>
  ) {
  }
}
